<template>
  <div class="">
      <el-button @click="pulish" type="success" size="small" class="w150 mb20">发布岗位</el-button>
        <el-table :data="tableData" border style="width: 100%" header-row-class-name="bgd8">
            <el-table-column prop="name" label="职位名称" > </el-table-column>
            <el-table-column prop="nameEn" label="职位英文名称" > </el-table-column>
            <el-table-column prop="location" label="工作地点" :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="locationEn" label="英文工作地点" :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="salaryInterval" label="薪酬区间"> </el-table-column>
            <el-table-column prop="content" label="职位描述" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="contentEn" label="职位英文描述" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="发布日期">
              <template slot-scope="scope">
                  <span>{{scope.row.createTime|formatDate}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作 " width="150px">
                <template slot-scope="scope">
                    <el-button @click="edit(scope.row)" type="info" size="small">编辑</el-button>
                    <el-button type="danger" size="small"  @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background  layout="prev, pager, next" :total="totalCount" @current-change="currentChange" @prev-click="prevClick" @next-click="nextClick"> </el-pagination>
        <el-dialog title="发布岗位" class="w750 h500" :visible.sync="dialogTableVisible">
          <el-form ref="ruleForm" :inline="true" :model="formData" class="msgform newstypeform" label-width="110px">
            <el-form-item label="职务名称" prop="name" class="formblock is-required">
              <el-input class="w200" v-model="formData.name" placeholder="请输入职务名称"></el-input>
            </el-form-item>
            <el-form-item label="职务名称英文" prop="nameEn" class="formblock is-required">
              <el-input class="w200" v-model="formData.nameEn"  placeholder="请输入职务名称英文"></el-input>
            </el-form-item>
            <el-form-item label="职务描述" prop="content" class="formblock is-required">
              <el-input v-model="formData.content" class="h200" type="textarea" placeholder="请输入职务描述"></el-input>
            </el-form-item>
            <el-form-item label="职务描述英文" prop="contentEn" class="formblock is-required">
              <el-input v-model="formData.contentEn" class="h200" type="textarea" placeholder="请输入职务描述英文"></el-input>
            </el-form-item>
            <el-form-item label="工作地点" prop="location" class="formblock is-required">
              <el-input v-model="formData.location" placeholder="请输入工作地点"></el-input>
            </el-form-item>
            <el-form-item label="工作地点英文" prop="locationEn" class="formblock is-required">
              <el-input v-model="formData.locationEn" placeholder="请输入工作地点英文"></el-input>
            </el-form-item>
            <el-form-item label="薪酬区间" prop="salaryIntervalfrom" class="is-required">
              <el-input class="w80 mr10" v-model="formData.salaryIntervalfrom"></el-input>
            </el-form-item>
            <el-form-item label="至" prop="salaryIntervalend" label-width="17px">
                <el-input class="w80 ml10" v-model="formData.salaryIntervalend"></el-input>
            </el-form-item>
            <el-button type="primary" class="w140" size="small" @click="onSubmit">确认</el-button>
          </el-form>
        </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    var checkSalary = (rule, value, callback) => {
        console.log(this)
        if (!value) {
          return callback(new Error('请输入薪酬区间'));
        }else{
          var numReg=/^[0-9]*$/;
          if (!numReg.test(value)) {
            callback(new Error('只能输入数字'));
          }else{
            if(this.formData.salaryIntervalfrom){
              console.log(value)
              console.log(this.formData.salaryIntervalfrom)
              console.log(value < this.formData.salaryIntervalfrom)
              if (value < this.formData.salaryIntervalfrom) {
                 callback(new Error('输入值需要大于开始值'));
              }else {
                callback();
              }
            }else{
              callback();
            }
            
          }
        }
    };
    return {
        dialogTableVisible:false,
        dialogTableVisible_content:false,
        formData:{
          name:'',
          nameEn:'',
          content:'',
          contentEn:'',
          location:'',
          locationEn:'',
          salaryIntervalfrom:'',
          salaryIntervalend:''
        },
        tableData: [],
        curPage:1,
        totalCount:0,
        // rules:{
        //   name: [{ required: true, message: '请输入职务名称', trigger: 'blur' }],
        //   content:[{ required: true, message: '请输入职务描述', trigger: 'blur' }],
        //   location:[{ required: true, message: '请输入工作地点', trigger: 'blur' }],
        //   salaryIntervalfrom:[
        //     { required: true, message: '请输入薪酬区间', trigger: 'blur' },
        //     {pattern: /^[0-9]*$/, message: '只能输入数字', trigger: 'blur' }
        //   ],
        //   salaryIntervalend:[
        //     // { required: true, message: '请输入薪酬区间', trigger: 'blur' },
        //     { validator: checkSalary, trigger: 'blur' }
        //   ],
        // }
    }
  },
  filters:{
    formatDate(date){
      date=new Date(date);
      var year=date.getFullYear();
      var month=date.getMonth()+1;
      var day=date.getDate();
      if(month<10){
        month='0'+month;
      }
      return year+'-'+month+'-'+day;
    }
  },
  methods:{
      del(data){
        this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var id =data.id;
          var httpApi=this.$store.state.httpApi;
          this.$http.post(this.$store.state.httpApi + 'recruitInfo/del?id='+id).then(response =>{
            if(response.status == 200){
              this.$message.success('删除成功');
					    this.getRows();
            }else{
              console.log('接口返回失败!',response);
            }
          },response => {          
            console.log('请求失败',response)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      edit(data){
          for (var j in this.formData){
            this.formData[j]='';
          }
          this.dialogTableVisible=true;
          for (var j in this.formData){
            if(data[j]){
              this.formData[j]=data[j];
            }
          }
          this.formData.nameEn = data.nameEn;
          this.formData.contentEn = data.contentEn;
          this.formData.locationEn = data.locationEn;
          this.formData.id=data.id;
          var strs= new Array(); //定义一数组
          strs=data.salaryInterval.split("-"); //字符分割 
          this.formData.salaryIntervalfrom = strs[0];
          this.formData.salaryIntervalend = strs[1];
      },
      pulish(){
        for (var j in this.formData){
            this.formData[j]='';
        }
        this.dialogTableVisible=true;
        // if(this.$refs.ruleForm){
        //   this.$refs.ruleForm.resetFields();
        // }
      },
      onSubmit(){
        var flag=true;
        var param={};
        for (var j in this.formData){
          if(j!='salaryIntervalfrom'&&j!='salaryIntervalend'){
            param[j]=this.formData[j];
          }
          if(this.formData[j]==''){
            flag=false;
          }
        }
        if(flag){
          var numReg=/^[0-9]*$/;
          if (!numReg.test(this.formData.salaryIntervalfrom)) {
            this.$message.error('薪酬区间开始值只能输入数字');
            return false;
          }else if(!numReg.test(this.formData.salaryIntervalend)){
            this.$message.error('薪酬区间结束值只能输入数字');
            return false;
          }else{
            console.log(this.formData.salaryIntervalend<this.formData.salaryIntervalfrom)
              if (this.formData.salaryIntervalend < this.formData.salaryIntervalfrom) {
                this.$message.error('薪酬区间结束值需要大于开始值');
                return false;
              }else {
                param.salaryInterval = this.formData.salaryIntervalfrom+"-"+this.formData.salaryIntervalend;
                this.$http.post(this.$store.state.httpApi + (this.formData.id ?'recruitInfo/update':'recruitInfo/save'),param).then(response =>{
                  if(response.status == 200){
                    this.$message.success(this.formData.id ? '修改成功' : '发布成功');
                    this.dialogTableVisible=false;
                    this.getRows();
                  }else{
                    console.log('接口返回失败!',response);
                  }
                  },response => {
                    console.log('请求失败',response)
                })
              }
          }
        }else{
          this.$message.error('您还有必填项还没有填！');
        } 
      },
      showContent(data){
        this.dialogTableVisible_content=true;
      },
      currentChange(page){
          this.curPage = page;
          this.getRows();
      },
      //上一页
      prevClick(page){
          this.curPage = page;
          this.getRows();
      },
    //  下一页
      nextClick(page){
          this.curPage = page;
          this.getRows();
      },
      getRows(){
          this.$http.get(this.$store.state.httpApi + 'recruitInfo/page?currentPage='+this.curPage+'&pageNumber='+10).then(response =>{
          if(response.status == 200){
          this.tableData=response.data.data.pp;
          this.totalCount = response.data.data.page.totalPage*10;
          }else{
            console.log('接口返回失败!',response);
          }
          },response => {
            console.log('请求失败',response)
          })
      },
  },
  created(){
    this.getRows();
  }

}
</script>
<style>
    .h200 .el-textarea__inner{
        height:200px
    } 
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
    .mr10{
        margin-right:10px;
    }
    .msgform{
        width:570px;
        margin:0 auto;
    }
    .el-form--inline .el-form-item{
      margin-right:0;
    }
    .w140{
      margin-top:30px;
    }
</style>
